<template>
  <div class="yhgl-container">
    <el-row :gutter="3">
      <!-- 左侧区域 -->
      <el-col :xs="3" :sm="3" :md="3" :lg="3" :xl="3"
        ><div class="left">
          <div class="left-top">
            <span
              >组织机构<span> </span>
              <i class="el-icon-edit"></i>
              <i class="el-icon-share"></i>
              <i class="el-icon-delete"></i>
            </span>
          </div>
          <el-divider></el-divider>
          <div class="tree-container">
            <el-tree
              :data="datas"
              :props="defaultProps"
              @node-click="handleNodeClick"
              style="background-color:#F3F3F4"
              class="tree"
              default-expand-all
            >
              <span class="custom-tree-node" slot-scope="{ node, data }">
                <span> <i :class="data.icon"></i>{{ node.label }} </span>
              </span>
            </el-tree>
          </div>
        </div>
      </el-col>
      <!-- 右侧区域 -->
      <el-col :xs="21" :sm="21" :md="21" :lg="21" :xl="21"
        ><div class="right">
          <!-- 卡片视图区域一 -->
          <el-card>
            <el-row :gutter="20">
              <!-- 登录名称 -->
              <el-col :span="5" :xs="5" :sm="5" :md="5" :lg="5" :xl="5">
                <el-row>
                  <el-col :span="8" :xs="8" :sm="8" :md="8" :lg="8" :xl="8"
                    >登录名称：</el-col
                  >
                  <el-col
                    :span="16"
                    :xs="16"
                    :sm="16"
                    :md="16"
                    :lg="16"
                    :xl="16"
                    ><el-input v-model="data.search"></el-input
                  ></el-col>
                </el-row>
              </el-col>
              <!-- 手机号码 -->
              <el-col :span="5" :xs="5" :sm="5" :md="5" :lg="5" :xl="5">
                <el-row>
                  <el-col :span="8" :xs="8" :sm="8" :md="8" :lg="8" :xl="8"
                    >手机号码：</el-col
                  >
                  <el-col
                    :span="16"
                    :xs="16"
                    :sm="16"
                    :md="16"
                    :lg="16"
                    :xl="16"
                    ><el-input
                  /></el-col>
                </el-row>
              </el-col>
              <!-- 用户状态 -->
              <el-col :span="5" :xs="5" :sm="5" :md="5" :lg="5" :xl="5">
                <el-row>
                  <el-col :span="8" :xs="8" :sm="8" :md="8" :lg="8" :xl="8"
                    >用户状态：</el-col
                  >
                  <el-col
                    :span="16"
                    :xs="16"
                    :sm="16"
                    :md="16"
                    :lg="16"
                    :xl="16"
                  >
                    <el-select v-model="select">
                      <el-option label="餐厅名" value="1"></el-option>
                      <el-option label="订单号" value="2"></el-option>
                      <el-option label="用户电话" value="3"></el-option>
                    </el-select>
                  </el-col>
                </el-row>
              </el-col>
              <!-- 创建时间 -->
              <el-col :span="5" :xs="5" :sm="5" :md="5" :lg="5" :xl="5">
                <el-row>
                  <el-col :span="8" :xs="8" :sm="8" :md="8" :lg="8" :xl="8"
                    >创建时间：</el-col
                  >
                  <el-col :span="7" :xs="7" :sm="7" :md="7" :lg="7" :xl="7"
                    ><el-input placeholder="开始时间"></el-input
                  ></el-col>
                  <el-col :span="2" :xs="2" :sm="2" :md="2" :lg="2" :xl="2"
                    >-</el-col
                  >
                  <el-col :span="7" :xs="7" :sm="7" :md="7" :lg="7" :xl="7"
                    ><el-input placeholder="结束时间"></el-input
                  ></el-col>
                </el-row>
              </el-col>
              <!-- 搜索及重置按钮 -->
              <el-col :span="4" :xs="4" :sm="4" :md="4" :lg="4" :xl="4">
                <el-row>
                  <el-col :span="8"
                    ><el-button
                      type="success"
                      icon="el-icon-search"
                      round
                      size="mini"
                      @click="open()"
                      >搜索</el-button
                    >
                  </el-col>
                  <el-col :span="8"
                    ><el-button
                      type="warning"
                      icon="el-icon-share"
                      round
                      size="mini"
                      @click="reset()"
                      >重置</el-button
                    ></el-col
                  >
                </el-row>
              </el-col>
            </el-row>
          </el-card>
          <!-- 卡片视图区域二 -->
          <el-card>
            <!-- 按钮 -->
            <div class="btns">
              <!-- 新增表单 -->
              <el-button
                type="primary"
                size="mini"
                icon="el-icon-plus"
                @click="dialogFormVisible = true"
                >新增</el-button
              >
              <el-dialog title="收货地址" :visible.sync="dialogFormVisible">
                <el-form :model="form">
                  <el-form-item label="活动名称" :label-width="formLabelWidth">
                    <el-input v-model="form.name" autocomplete="off"></el-input>
                  </el-form-item>
                  <el-form-item label="活动区域" :label-width="formLabelWidth">
                    <el-select
                      v-model="form.region"
                      placeholder="请选择活动区域"
                    >
                      <el-option label="区域一" value="changsha"></el-option>
                      <el-option label="区域二" value="wuhan"></el-option>
                    </el-select>
                  </el-form-item>
                </el-form>
                <div slot="footer" class="dialog-footer">
                  <el-button @click="dialogFormVisible = false"
                    >取 消</el-button
                  >
                  <el-button type="primary" @click="dialogFormVisible = false"
                    >确 定</el-button
                  >
                </div>
              </el-dialog>
              <!-- 修改表单 -->
              <el-button
                type="success"
                size="mini"
                icon="el-icon-edit"
                @click="dialogFormVisible = true"
                >修改</el-button
              >
              <el-dialog title="收货地址" :visible.sync="dialogFormVisible">
                <el-form :model="form">
                  <el-form-item label="活动名称" :label-width="formLabelWidth">
                    <el-input v-model="form.name" autocomplete="off"></el-input>
                  </el-form-item>
                  <el-form-item label="活动区域" :label-width="formLabelWidth">
                    <el-select
                      v-model="form.region"
                      placeholder="请选择活动区域"
                    >
                      <el-option label="区域一" value="shanghai"></el-option>
                      <el-option label="区域二" value="beijing"></el-option>
                    </el-select>
                  </el-form-item>
                </el-form>
                <div slot="footer" class="dialog-footer">
                  <el-button @click="dialogFormVisible = false"
                    >取 消</el-button
                  >
                  <el-button type="primary" @click="dialogFormVisible = false"
                    >确 定</el-button
                  >
                </div>
              </el-dialog>
              <!-- 删除表单 -->
              <el-button
                type="info"
                size="mini"
                icon="el-icon-close"
                @click="delFormVisible = true"
                >删除</el-button
              >
              <el-dialog
                title="提示"
                :visible.sync="delFormVisible"
                width="30%"
                :before-close="handleClose"
              >
                <span>您确认要删除吗</span>
                <span slot="footer" class="dialog-footer">
                  <el-button @click="delFormVisible = false">取 消</el-button>
                  <el-button type="primary" @click="delFormVisible = false"
                    >确 定</el-button
                  >
                </span>
              </el-dialog>
              <!-- 导入表单 -->
              <el-button
                type="warning"
                size="mini"
                icon="el-icon-download"
                @click="dialogFormVisible = true"
                >导入</el-button
              >
              <el-dialog title="收货地址" :visible.sync="dialogFormVisible">
                <el-form :model="form">
                  <el-form-item label="活动名称" :label-width="formLabelWidth">
                    <el-input v-model="form.name" autocomplete="off"></el-input>
                  </el-form-item>
                  <el-form-item label="活动区域" :label-width="formLabelWidth">
                    <el-select
                      v-model="form.region"
                      placeholder="请选择活动区域"
                    >
                      <el-option label="区域一" value="shanghai"></el-option>
                      <el-option label="区域二" value="beijing"></el-option>
                    </el-select>
                  </el-form-item>
                </el-form>
                <div slot="footer" class="dialog-footer">
                  <el-button @click="dialogFormVisible = false"
                    >取 消</el-button
                  >
                  <el-button type="primary" @click="dialogFormVisible = false"
                    >确 定</el-button
                  >
                </div>
              </el-dialog>
              <!-- 导出表单 -->
              <el-button
                type="danger"
                size="mini"
                icon="el-icon-upload2"
                @click="dialogFormVisible = true"
                >导出</el-button
              >
              <el-dialog title="收货地址" :visible.sync="dialogFormVisible">
                <el-form :model="form">
                  <el-form-item label="活动名称" :label-width="formLabelWidth">
                    <el-input v-model="form.name" autocomplete="off"></el-input>
                  </el-form-item>
                  <el-form-item label="活动区域" :label-width="formLabelWidth">
                    <el-select
                      v-model="form.region"
                      placeholder="请选择活动区域"
                    >
                      <el-option label="区域一" value="shanghai"></el-option>
                      <el-option label="区域二" value="beijing"></el-option>
                    </el-select>
                  </el-form-item>
                </el-form>
                <div slot="footer" class="dialog-footer">
                  <el-button @click="dialogFormVisible = false"
                    >取 消</el-button
                  >
                  <el-button type="primary" @click="dialogFormVisible = false"
                    >确 定</el-button
                  >
                </div>
              </el-dialog>
            </div>
            <!-- 表格 -->
            <el-table :data="data.users">
              <el-table-column type="selection" width="55"> </el-table-column>
              <el-table-column prop="id" label="用户ID"> </el-table-column>
              <el-table-column prop="loginname" label="登录名称">
              </el-table-column>
              <el-table-column prop="username" label="用户名称">
              </el-table-column>
              <el-table-column prop="department" label="部门">
              </el-table-column>
              <el-table-column prop="mobile" label="手机"> </el-table-column>
              <el-table-column prop="mg_state" label="用户状态">
                <template slot-scope="scope">
                  <el-switch
                    v-model="scope.row.mg_state"
                    @change="change(scope.row)"
                  >
                  </el-switch>
                </template>
              </el-table-column>
              <el-table-column
                prop="create_time"
                label="创建时间"
                width="300px;"
              >
              </el-table-column>
              <el-table-column prop="address" label="操作" width="300px;">
                <template>
                  <!-- 编辑按钮 -->
                  <el-button
                    type="primary"
                    icon="el-icon-edit"
                    size="mini"
                    @click="editFormVisible = true"
                    >编辑</el-button
                  >
                  <el-dialog
                    title="收货地址"
                    :visible.sync="editFormVisible"
                    :append-to-body="true"
                  >
                    <el-form :model="editform">
                      <el-form-item
                        label="活动名称"
                        :label-width="formLabelWidth"
                      >
                        <el-input
                          v-model="editform.names"
                          autocomplete="off"
                        ></el-input>
                      </el-form-item>
                      <el-form-item
                        label="活动区域"
                        :label-width="formLabelWidth"
                      >
                        <el-select
                          v-model="editform.regions"
                          placeholder="请选择活动区域"
                        >
                          <el-option label="长沙" value="1"></el-option>
                          <el-option label="武汉" value="2"></el-option>
                        </el-select>
                      </el-form-item>
                    </el-form>
                    <div slot="footer" class="dialog-footer">
                      <el-button @click="editFormVisible = false"
                        >取 消</el-button
                      >
                      <el-button type="primary" @click="editFormVisible = false"
                        >确 定</el-button
                      >
                    </div>
                  </el-dialog>
                  <!-- 删除按钮 -->
                  <el-button
                    type="danger"
                    icon="el-icon-share"
                    size="mini"
                    @click="editFormVisible = true"
                    >删除</el-button
                  >
                  <el-dialog
                    title="收货地址"
                    :visible.sync="editFormVisible"
                    :append-to-body="true"
                  >
                    <el-form :model="editform">
                      <el-form-item
                        label="活动名称"
                        :label-width="formLabelWidth"
                      >
                        <el-input
                          v-model="editform.names"
                          autocomplete="off"
                        ></el-input>
                      </el-form-item>
                      <el-form-item
                        label="活动区域"
                        :label-width="formLabelWidth"
                      >
                        <el-select
                          v-model="editform.regions"
                          placeholder="请选择活动区域"
                        >
                          <el-option label="长沙" value="1"></el-option>
                          <el-option label="武汉" value="2"></el-option>
                        </el-select>
                      </el-form-item>
                    </el-form>
                    <div slot="footer" class="dialog-footer">
                      <el-button @click="editFormVisible = false"
                        >取 消</el-button
                      >
                      <el-button type="primary" @click="editFormVisible = false"
                        >确 定</el-button
                      >
                    </div>
                  </el-dialog>
                  <!-- 重置按钮 -->
                  <el-button
                    type="success"
                    icon="el-icon-delete"
                    size="mini"
                    @click="editFormVisible = true"
                    >重置</el-button
                  >
                  <el-dialog
                    title="收货地址"
                    :visible.sync="editFormVisible"
                    :append-to-body="true"
                  >
                    <el-form :model="editform">
                      <el-form-item
                        label="活动名称"
                        :label-width="formLabelWidth"
                      >
                        <el-input
                          v-model="editform.names"
                          autocomplete="off"
                        ></el-input>
                      </el-form-item>
                      <el-form-item
                        label="活动区域"
                        :label-width="formLabelWidth"
                      >
                        <el-select
                          v-model="editform.regions"
                          placeholder="请选择活动区域"
                        >
                          <el-option label="长沙" value="1"></el-option>
                          <el-option label="武汉" value="2"></el-option>
                        </el-select>
                      </el-form-item>
                    </el-form>
                    <div slot="footer" class="dialog-footer">
                      <el-button @click="editFormVisible = false"
                        >取 消</el-button
                      >
                      <el-button type="primary" @click="editFormVisible = false"
                        >确 定</el-button
                      >
                    </div>
                  </el-dialog>
                </template>
              </el-table-column>
            </el-table>
            <!-- 分页 -->
            <el-pagination
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page="queryInfo.pagenum"
              :page-sizes="[1, 2, 5, 10]"
              :page-size="queryInfo.pagesize"
              layout="total, sizes, prev, pager, next, jumper"
              :total="data.totalpage"
            >
            </el-pagination>
          </el-card></div
      ></el-col>
    </el-row>
  </div>
</template>

<script>
export default {
  data() {
    return {
      datas: [
        {
          label: '群防群治联合会',
          icon: 'el-icon-s-flag',
          children: [
            {
              label: '联合会内设机构',
              icon: 'el-icon-user-solid',
              children: [
                {
                  label: '战略规划室',
                  icon: 'el-icon-s-check'
                },
                {
                  label: '综合管理室',
                  icon: 'el-icon-s-check'
                },
                {
                  label: '科研技术室',
                  icon: 'el-icon-s-check'
                },
                {
                  label: '第一创新中心',
                  icon: 'el-icon-s-check'
                },
                {
                  label: '第二创新中心',
                  icon: 'el-icon-s-check'
                },
                {
                  label: '第三创新中心',
                  icon: 'el-icon-s-check'
                },
                {
                  label: '第四创新中心',
                  icon: 'el-icon-s-check'
                },
                {
                  label: '联合会秘书处',
                  icon: 'el-icon-s-check'
                }
              ]
            },
            {
              label: '合作友商',
              icon: 'el-icon-star-on',
              children: [
                {
                  label: '中国邮政集团有限公司',
                  icon: 'el-icon-star-off'
                },
                {
                  label: '中石化长沙公司',
                  icon: 'el-icon-star-off'
                },
                {
                  label: '长沙银行',
                  icon: 'el-icon-star-off'
                },
                {
                  label: '爆米花',
                  icon: 'el-icon-star-off'
                },
                {
                  label: '绿叶水果',
                  icon: 'el-icon-star-off'
                }
              ]
            }
          ]
        }
      ],
      defaultProps: {
        children: 'children',
        label: 'label'
      },
      select: '',
      data: {
        prop: '',
        totalpage: 10,
        pagenum: 4,
        search: 'admin',
        searchData: '',
        users: [
          // 假数据
          {
            id: 25,
            loginname: '刘海江',
            username: '刘海江',
            department: '科研技术室',
            mobile: '18616358651',
            mg_state: false,
            create_time: '2017-11-09 20:36:26 '
          },
          {
            id: 10,
            loginname: '高旻轩',
            username: '高旻轩',
            department: '科研技术室',
            mobile: '18616350542',
            mg_state: true,
            create_time: '2017-11-09 20:36:26 '
          },
          {
            id: 10,
            loginname: '高旻轩',
            username: '高旻轩',
            department: '科研技术室',
            mobile: '18616350542',
            mg_state: true,
            create_time: '2017-11-09 20:36:26 '
          },
          {
            id: 10,
            loginname: '高旻轩',
            username: '高旻轩',
            department: '科研技术室',
            mobile: '18616350542',
            mg_state: true,
            create_time: '2017-11-09 20:36:26 '
          },
          {
            id: 10,
            loginname: '高旻轩',
            username: '高旻轩',
            department: '科研技术室',
            mobile: '18616350542',
            mg_state: true,
            create_time: '2017-11-09 20:36:26 '
          },
          {
            id: 10,
            loginname: '高旻轩',
            username: '高旻轩',
            department: '科研技术室',
            mobile: '18616350542',
            mg_state: true,
            create_time: '2017-11-09 20:36:26 '
          },
          {
            id: 10,
            loginname: '高旻轩',
            username: '高旻轩',
            department: '科研技术室',
            mobile: '18616350542',
            mg_state: true,
            create_time: '2017-11-09 20:36:26 '
          },
          {
            id: 10,
            loginname: '高旻轩',
            username: '高旻轩',
            department: '科研技术室',
            mobile: '18616350542',
            mg_state: true,
            create_time: '2017-11-09 20:36:26 '
          },
          {
            id: 10,
            loginname: '高旻轩',
            username: '高旻轩',
            department: '科研技术室',
            mobile: '18616350542',
            mg_state: true,
            create_time: '2017-11-09 20:36:26 '
          },
          {
            id: 10,
            loginname: '高旻轩',
            username: '高旻轩',
            department: '科研技术室',
            mobile: '18616350542',
            mg_state: true,
            create_time: '2017-11-09 20:36:26 '
          },
          {
            id: 10,
            loginname: '高旻轩',
            username: '高旻轩',
            department: '科研技术室',
            mobile: '18616350542',
            mg_state: true,
            create_time: '2017-11-09 20:36:26 '
          }
        ]
      },
      queryInfo: {
        pagenum: 1,
        pagesize: 2
      },
      dialogFormVisible: false,
      editFormVisible: false,
      form: {
        name: '',
        region: ''
      },
      editform: {
        names: '',
        regions: ''
      },
      formLabelWidth: '120px',
      editformLabelWidth: '120px',
      delFormVisible: false
    }
  },
  methods: {
    handleNodeClick(datas) {
      console.log(datas)
    },
    open() {
      this.$message('这是一条消息提示')
    },
    reset() {
      console.log('重置')
    },
    handleClose(done) {
      this.$confirm('确认关闭？')
        .then(_ => {
          done()
        })
        .catch(_ => {})
    },
    // 修改用户状态
    change(users) {
      console.log(users)
    },
    // 监听pagesize改变事件
    handleSizeChange(newSize) {
      console.log(newSize)
      this.queryInfo.pagesize = newSize
    },
    // 监听页码值改变事件
    handleCurrentChange(newPage) {
      console.log(newPage)
    }
  }
}
</script>

<style lang="less" scoped>
.tree /deep/ .el-tree-node {
  position: relative;
  padding-left: 5px;
  .el-tree-node__content {
    padding-left: 10px !important;
    margin: 5px;
  }
}

.tree /deep/ .el-tree-node__children {
  padding-left: 16px;
}

.tree /deep/ .el-tree-node :last-child:before {
  height: 38px;
}

.tree /deep/ .el-tree > .el-tree-node:before {
  border-left: none;
}

.tree-container /deep/ .el-tree > .el-tree-node:after {
  border-top: none;
}

.tree /deep/ .el-tree-node:before {
  content: '';
  left: -4px;
  position: absolute;
  right: auto;
  border-width: 1px;
}

.tree /deep/ .el-tree-node:after {
  content: '';
  left: -4px;
  position: absolute;
  right: auto;
  border-width: 1px;
}
.tree /deep/ .el-tree-node__expand-icon.is-leaf {
  display: none;
}

.tree /deep/ .el-tree-node:before {
  border-left: 1px dashed #b8b9bb;
  bottom: 0px;
  height: 100%;
  top: -26px;
  width: 1px;
}

.tree /deep/ .el-tree-node:after {
  border-top: 1px dashed #b8b9bb;
  height: 20px;
  top: 12px;
  width: 24px;
}

.yhgl-container {
  display: flex;
  .left-top {
    height: 50px;
    line-height: 50px;
    text-align: center;
    span {
      margin: 20px;
      i {
        margin: 3px;
      }
    }
  }
  .el-divider--horizontal {
    margin: 0;
  }
}
.el-input {
  display: inline-block;
}
.el-card:nth-child(1) {
  height: 80px;
  margin: 10px 0;
  .el-col {
    text-align: center;
    line-height: 40px;
  }
}
.btns {
  padding: 10px;
}
.el-button {
  margin: 0 5px;
}
</style>
